<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

// 定义 props
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
})

// 路由
const router = useRouter()

// 计算属性
const area = computed(() => {
  if (props.item.consigneeAddressPath && props.item.consigneeAddressPath.trim().length > 0) {
    return props.item.consigneeAddressPath.replaceAll(",", " ")
  }
  return ''
})

// 方法定义
const edit = () => {
  router.push({
    path: "/addressDetail",
    query: {
      type: 1,
      id: props.item.id,
    },
  })
}
</script>

<template>
  <div class="addressItem">
    <div class="userInfo">
      <div class="left">
        <div class="name">{{ item.name }}</div>
        <div class="phone">{{ item.mobile }}</div>
        <div v-if="item.isDefault" class="tag">
          <van-tag plain type="danger">默认</van-tag>
        </div>
      </div>
      <van-icon name="edit" class="edit_icon" @click="edit" />
    </div>
    <div class="area">
      <div class="area_text">{{ area }}</div>
      <div class="area_text">{{ item.detail }}</div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.addressItem {
  width: 100%;
  padding: 50px 25px;
  border-radius: 30px;
  background: #fff;
  margin-bottom: 30px;

  .userInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .name {
        font-size: 48px;
        color: #333;
      }

      .phone {
        font-size: 48px;
        color: #919191;
        margin: 0 20px 0 30px;
      }

      .tag {
        display: flex;
        align-items: center;

        :deep(.van-tag) {
          font-size: 40px;
          padding: 20px;
        }
      }
    }

    .edit_icon {
      font-size: 50px;
      color: #919191;
    }
  }

  .area {
    margin-top: 30px;
    display: flex;
    align-items: center;

    &_text {
      font-size: 48px;
      color: #919191;
      margin: 0 10px 0 0;
    }
  }
}
</style>
